/* Defaults */

*
{
    padding: 0;
    margin: 0;
    border: 0;
    position: relative;
    color:#FFFFFF;
    background-color: transpant;
}

/* Layout */
body
{
    width: 960px; 
    height: 540px;
}

#main
{
     position: absolute;
     left: 0px; top: 0px;
     width: 960px; height: 540px;
}

#player_container {
	position: absolute;
	width: 960px;
	height: 540px;
	opacity: 0;
 	left: 0;
 	top: 0;
}

#player_container.show {
	z-index:5;
	opacity: 1;
}

#logo
{
	position: absolute;
	top: 0px;
	height: 35px;
	width: 100%;
    background-image: url("../Images/BgLogo.png");
    background-repeat:repeat-x;
    font-size:25px;
    padding-top:3px;
    padding-left:20px;
    z-index:10;
}

/* Right Half */
#rightHalf
{
    position: absolute;
    left:420px; top: -5px;
    width: 540px; height: 540px;
    background-image:url("../Images/videoBox/rightHalf.png");
}

#videoBox_top
{
    position:absolute;
    left:30px; top:55px;
    width:488px; height:8px;
    background-image:url("../Images/videoBox/top.png");
}

#videoBox_left
{
    position:absolute;
    left:30px; top:55px;
    width:8px; height:278px;
    background-image:url("../Images/videoBox/left.png");
}

#videoBox_right
{
    position:absolute;
    left:510px; top:55px;
    width:8px; height:278px;
    background-image:url("../Images/videoBox/right.png");
}

#videoBox_bottom
{
    position:absolute;
    left:30px; top:333px;
    width:488px; height:56px;
    background-image:url("../Images/videoBox/bottom.png");
}

#time
{
    position:absolute; 
    left:8px; top:0px;
    width:472px; height:24px;
}

#progressBarBG
{
    position:absolute;
    left:4px; top:8px;
    width:400px; height:8px;
    background-image:url("../Images/videoBox/progressBarBG.png");
}

#progressBar
{
    position:absolute;
    left:0px; top:0px;
    width:0%; height:8px;
    background-image:url("../Images/videoBox/progressBar.png");
}

#timeInfo
{
    position:absolute;
    left:408px; top:4px;
    width:60px; height:16px;
    
    text-align:center;
    font-size:12px;
}

#volume
{
    position:absolute; 
    left:8px; top:24px;
    width:472px; height:24px;
}

#volumeIcon
{
    position:absolute;
    left:4px; top:4px;
    width:17px; height:16px;
    background-image:url("../Images/videoBox/volume.png");
}

#volumeBarBG
{
    position:absolute;
    left:22px; top:8px;
    width:144px; height:8px;
    background-image:url("../Images/videoBox/volumeBarBG.png");
}

#volumeBar
{
    position:absolute;
    left:0px; top:0px;
    width:0%; height:8px;
    background-image:url("../Images/videoBox/volumeBar.png");
}

#volumeInfo
{
    position:absolute;
    left:168px; top:4px;
    width:32px; height:16px;
    
    text-align:left;
    font-size:12px;
}

#videoControl
{
    position:absolute;
    left:250px; top:25px;
    width:100px; height:20px;
}

#rewind
{
    position:absolute;
    left:0px; top:0px;
    width:20px; height:20px;
    background-image:url("../Images/control/krew.png");
    opacity:0.2;
}

#play
{
    position:absolute;
    left:20px; top:0px;
    width:20px; height:20px;
    background-image:url("../Images/control/kplay.png");
    opacity:1.0;
}

#stop
{
    position:absolute;
    left:40px; top:0px;
    width:20px; height:20px;
    background-image:url("../Images/control/kstop.png");
    opacity:0.2;
}

#pause
{
    position:absolute;
    left:60px; top:0px;
    width:20px; height:20px;
    background-image:url("../Images/control/kpause.png");
    opacity:0.2;
}

#forward
{
    position:absolute;
    left:80px; top:0px;
    width:20px; height:20px;
    background-image:url("../Images/control/kfwd.png");
    opacity:0.2;
}

#status
{
    position:absolute;
    left:390px; top:28px;
    width: 98px; height:16px;
    
    text-align:left;
    font-size:12px;
}

#description_top
{
    position:absolute;
    left:30px; top:390px;
    width:488px; height:50px;
    background-image:url("../Images/descriptionBox/description_top.png");
}

#description_bottom
{
    position:absolute;
    left:30px; top:440px;
    width:488px; height:50px;
    background-image:url("../Images/descriptionBox/description_bottom.png");
}

#description
{
    position:absolute;
    left:45px; top:400px;
    width:458px; height:80px;
    
    text-align:left;
    font-size:16px;
    overflow:hidden;
    text-overflow : ellipsis;
}

/* Left Half */
#leftHalf
{
    position:absolute;
    left: 0px; top:0px;
    width:420px; height:540px;
    background-color: black;
}

#videoList
{
    position:absolute;
    left:30px; top:55px; 
    width: 390px; height:430px;
    background-image:url("../Images/listBox/listBox.png");
}

#video0
{
    position:absolute;
    left:30px; top:70px;
    width:330px; height:47px;
    
    background-repeat:no-repeat; 
    padding-left:20px;
    padding-top:10px;
}

#video1
{
    position:absolute;
    left:30px; top:130px;
    width:330px; height:47px;
    
    background-repeat:no-repeat; 
    padding-left:20px;
    padding-top:10px;
}

#video2
{
    position:absolute;
    left:30px; top:190px;
    width:330px; height:47px;
    
    background-repeat:no-repeat; 
    padding-left:20px;
    padding-top:10px;
}

#video3
{
    position:absolute;
    left:30px; top:250px;
    width:330px; height:47px;
    
    background-repeat:no-repeat; 
    padding-left:20px;
    padding-top:10px;
}

#video4
{
    position:absolute;
    left:30px; top:310px;
    width:330px; height:47px;
    
    background-repeat:no-repeat; 
    padding-left:20px;
    padding-top:10px;
}

#videoCount
{
    position:absolute;
    left:330px; top:30px;
    width:30px; height:20px;
    
    text-align:left;
    font-size:12px;
}

#previous
{
    position:absolute;
    left:210px; top:80px;
    width:30px; height:30px;
    background-image:url("../Images/listBox/previous.png");
    opacity:0.2;
}

#next
{
    position:absolute;
    left:210px; top:430px;
    width:30px; height:30px;
    background-image:url("../Images/listBox/next.png");
    opacity:0.2;
}

.style_videoList
{    
    color:#FFFFFF;
    text-align:left;
    font-size:20px;
}

#navi
{
	position: absolute;
	top: 505px;
	height: 35px;
	width: 100%;
    background-image: url("../Images/BgNavigator.png");
    background-repeat:repeat-x;
}

#help_navi
{
    position:absolute;
    left:275px; top:5px; 
    width:785px; height:28px;
}

.style_navi {
    bottom:4px;
    height:20px;
    font-size:20px;
}